<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>客户列表</title>
    <!-- 引入样式 -->
    <link rel="stylesheet" type="text/css" href="/assets/element-plus/index.css">
    <!-- 引入 Vue.js -->
    <script src="/assets/vue/vue.global.js"></script>
    <!-- 引入 Element Plus -->
    <script src="/assets/element-plus/index.full.js"></script>
    <!-- 引入 Axios -->
    <script src="/assets/axios/axios.js"></script>
    <!-- 引入自定义安全模块 -->
    <script src="/assets/oa/security.js"></script>
    <style>
        /* 自定义样式 */
        .info .el-col, .info .el-select, .info .el-input {
            padding-top: 5px;
            padding-bottom: 5px;
        }
        /* 垂直排列按钮的样式 */
        .button-container {
            display: flex;
            flex-direction: column;
            gap: 10px; /* 设置按钮之间的间隔 */
        }
    </style>
</head>
<body>
<div id="app">
    <!-- 页面标题 -->
    <h2>客户列表</h2>
    <!-- 客户信息表格 -->
    <el-table
            ref="singleTable"
            :data="tableData"
            style="width: 100%">
        <!-- 序号列 -->
        <el-table-column type="index" width="40">
        </el-table-column>
        <!-- 客户号列 -->
        <el-table-column property="customerid" label="客户号" width="145">
        </el-table-column>
        <!-- 客户登录账户名列 -->
        <el-table-column property="customerusername" label="账户名" width="100">
        </el-table-column>
        <!-- 客户名称列 -->
        <el-table-column property="customername" label="客户名称" width="145">
        </el-table-column>
        <!-- 账号余额列 -->
        <el-table-column property="customerbalance" label="账号余额" width="100">
            <template #default="{ row }">
                {{ row.customerbalance }} 元
            </template>
        </el-table-column>
        <!-- 账号状态列 -->
        <el-table-column label="账号状态" width="108">
            <template #default="{ row }">
                <el-select v-model="row.customerstatus" @change="updateCustomerStatus(row)">
                    <el-option label="使用中" value="使用中"></el-option>
                    <el-option label="禁用" value="禁用"></el-option>
                    <el-option label="注销" value="注销"></el-option>
                </el-select>
            </template>
        </el-table-column>
        <!-- 客户所属行业ID列 -->
        <el-table-column property="customerindustryid" label="所属行业" width="88">
        </el-table-column>
        <!-- 创建时间列 -->
        <el-table-column property="createtime" label="创建时间" :formatter="formatTimestamp" width="160">
        </el-table-column>
        <!-- 信息更新时间列 -->
        <el-table-column property="updatetime" label="信息更新时间" :formatter="formatTimestamp" width="160">
        </el-table-column>
        <!-- 头像地址列 -->
        <el-table-column property="profilepicture" label="头像">
            <template #default="{ row }">
                <img :src="getImageUrl(row.profilepicture)" alt="头像" style="max-width: 120px; max-height: 120px;">
            </template>
        </el-table-column>
        <!-- 在表格中添加操作列 -->
        <el-table-column label="操作" width="100">
            <template #default="{ row }">
                <div class="button-container">
                    <el-button type="primary" @click="editAdmin(row)">详情</el-button>
                    <el-button type="primary" @click="totalAdmin(row)">统算</el-button>
                    <el-button type="danger" @click="deleteAdmin(row)">删除</el-button>
                </div>
            </template>
        </el-table-column>
    </el-table>
</div>

<script>
    // 定义 Main 组件
    var Main = {
        data() {
            return {
                tableData: [] // 客户信息数据
            }
        },
        methods: {
            // 更新客户状态的方法...
            updateCustomerStatus(customer) {
                console.info("updateCustomerStatus 参数校验是否有值：")
                console.info(customer.customerid)
                console.info(customer.customerstatus)
                axios.post("/cusinfo/updateStatus", { customerId: customer.customerid, status: customer.customerstatus })
                    .then(response => {
                        // 更新表格数据
                        this.fetchAdminData();
                        console.log("账号状态更新成功");
                    })
                    .catch(error => {
                        console.error("账号状态更新失败：" + error);
                    });
            },
            formatTimestamp(row, column) {
                const timestamp = row[column.property];
                if (!timestamp) return ''; // 如果时间戳不存在，则返回空字符串
                const date = new Date(timestamp);
                const year = date.getFullYear();
                const month = (date.getMonth() + 1).toString().padStart(2, '0');
                const day = date.getDate().toString().padStart(2, '0');
                const hours = date.getHours().toString().padStart(2, '0');
                const minutes = date.getMinutes().toString().padStart(2, '0');
                const seconds = date.getSeconds().toString().padStart(2, '0');
                return `${year}-${month}-${day} ${hours}:${minutes}:${seconds}`;
            },
            getImageUrl(profilepicture) {
                // 假设后端图片存储在 /imgs 目录下
                return `/images/${profilepicture}`;
            },
            fetchAdminData() {
                // 在组件加载完成后，使用 Axios 获取客户信息数据
                axios.get("/cusinfo/queryAll")
                    .then(response => {
                        console.info("前端获取数据成功，以下打印：")
                        console.info(response);
                        // 将获取到的客户信息数据赋值给表格数据
                        this.tableData = response.data.data;
                    })
                    .catch(error => {
                        console.error("获取客户信息失败：" + error);
                    });
            },
            // 其他方法...
            editAdmin(row) {
                // 获取管理员ID
                const customerid = row.customerid;
                console.info("进入了客户详情页面，等待跳转");
                console.info(customerid);
                // 构造编辑页面的URL，并跳转到该页面
                window.location.href = `/customer_info.html?customerid=${customerid}`;
            },
            totalAdmin(row) {
                // 获取客户ID
                const customerid = row.customerid;
                console.info("进入了客户统算页面，等待跳转");
                console.info(customerid);
                // 构造编辑页面的URL，并跳转到该页面
                window.location.href = `/statistics.html?customerid=${customerid}`;
            },
            deleteAdmin(row) {
                // 使用 Element Plus 的 el-message-box 组件弹出确认框
                this.$confirm('此操作将永久删除该管理员，是否继续？', '提示', {
                    confirmButtonText: '确定',
                    cancelButtonText: '取消',
                    type: 'warning'
                }).then(() => {
                    // 用户点击了确定按钮，执行删除操作
                    console.log("删除管理员：" + row.customerid);
                    axios.post("/cusinfo/delete", { customerid: row.customerid })
                        .then(response => {
                            // 删除成功后，重新获取管理员信息数据
                            this.fetchAdminData();
                            console.log("管理员删除成功");
                        })
                        .catch(error => {
                            console.error("管理员删除失败：" + error);
                        });
                }).catch(() => {
                    // 用户点击了取消按钮，不执行任何操作
                    console.log("取消删除管理员：" + row.customerid);
                });
            }
        },
        mounted() {
            // 页面加载完成时获取客户信息数据
            this.fetchAdminData();
        }
    };

    // 创建 Vue 应用
    const app = Vue.createApp(Main);
    // 使用 Element Plus
    app.use(ElementPlus);
    // 挂载至 #app
    app.mount("#app");
</script>

</body>
</html>
